1 00:00:00,530 --> 00:00:01,010 All right. 2 00:00:01,010 --> 00:00:03,080 So welcome back. 3 00:00:03,080 --> 00:00:10,160 In this lesson we're going to talk in detail about each t AML and c assess the goal of this lesson is 4 00:00:10,160 --> 00:00:15,350 really to create the look and feel of the Web site and in the process we're going to learn how to work 5 00:00:15,350 --> 00:00:18,240 with H Jim and that elements to our site. 6 00:00:18,410 --> 00:00:23,490 And we're also going to learn how to style the Web site with CSX. 7 00:00:23,660 --> 00:00:26,090 So what does our Web site look like at the moment. 8 00:00:26,090 --> 00:00:28,730 What does our stop project actually look like. 9 00:00:28,730 --> 00:00:31,120 Well it looks something like this. 10 00:00:31,160 --> 00:00:36,380 So the objective of this lesson is to get this stuff project which I've got here on my right now to 11 00:00:36,380 --> 00:00:40,100 look more like the final version of the Web site which I've got on the left. 12 00:00:40,220 --> 00:00:44,780 So our objective for this lesson is really to do two things. 13 00:00:44,780 --> 00:00:48,430 First we need to add some new elements to our Web site. 14 00:00:48,500 --> 00:00:55,760 And that means adding a big title using each demo and also adding a canvas for drawing using HDMI. 15 00:00:56,120 --> 00:01:02,240 And then we have the style the two existing elements from the Stop project namely the button and the 16 00:01:02,240 --> 00:01:03,100 equation. 17 00:01:03,140 --> 00:01:09,020 So how we're going to go about this how we're going to add the title and the canvas for that we're gonna 18 00:01:09,020 --> 00:01:15,680 use HCM L which is all about the structure of the website and how we're going to style everything for 19 00:01:15,680 --> 00:01:16,070 that. 20 00:01:16,070 --> 00:01:20,540 We're gonna use CSX which is all about the style to get started. 21 00:01:20,570 --> 00:01:22,090 Let's open three programs. 22 00:01:22,110 --> 00:01:28,010 This code chrome and our Jupiter notebook for the Jupiter notebook just bring up your Anaconda prompt 23 00:01:28,370 --> 00:01:34,820 or your Mac terminal and type Jupiter notebook and then go to your M.L. projects folder and then open 24 00:01:34,820 --> 00:01:36,230 the latest Jupiter notebook. 25 00:01:36,230 --> 00:01:38,930 Now you're also gonna need yes code for this lesson. 26 00:01:38,930 --> 00:01:40,730 So make sure you've got that open as well. 27 00:01:41,740 --> 00:01:49,150 And in this code you're simply going to open the math guard and stub folder that way you should see 28 00:01:49,240 --> 00:01:56,380 all the files in that folder appear here in the Explorer pane finally go to the index dot each mail 29 00:01:56,380 --> 00:01:59,770 file and open it with Chrome. 30 00:01:59,770 --> 00:02:02,980 Let's begin by adding a title to this web page. 31 00:02:02,980 --> 00:02:06,560 And to do that we're going to go straight into as code. 32 00:02:06,760 --> 00:02:12,070 Once you've got this code open and you're in the index dot each time l file you should see this comment 33 00:02:12,250 --> 00:02:13,510 right here. 34 00:02:13,510 --> 00:02:19,840 And we're going to add our title just below that line by opening the angled brackets and then using 35 00:02:20,050 --> 00:02:28,750 the drop down menu to select the H one tag we can add a title simply by hitting enter on our keyboard 36 00:02:28,750 --> 00:02:35,620 to selected closing the angled brackets and then adding the title between the angled brackets like so 37 00:02:36,100 --> 00:02:38,790 title goes here. 38 00:02:38,890 --> 00:02:45,460 So I've added a title and I'm going to save it by hitting controller command s on my keyboard going 39 00:02:45,460 --> 00:02:49,320 back into chrome and refreshing my page. 40 00:02:49,600 --> 00:02:56,380 And what you should see is the title that we've added to our HMO file appear right here. 41 00:02:56,410 --> 00:02:59,390 Let's change this title to math Gordon. 42 00:02:59,770 --> 00:03:08,420 So coming back here I can modify this text right here to read math Gordon instead. 43 00:03:08,550 --> 00:03:11,040 And again I would have to save my changes 44 00:03:13,760 --> 00:03:17,970 go back into chrome and refresh to see those changes applied. 45 00:03:18,470 --> 00:03:19,850 So what do we just do. 46 00:03:19,850 --> 00:03:23,010 What was this each one that we've added here. 47 00:03:23,090 --> 00:03:28,640 Well we've just written some age Jamal code and this H1 one that we've got right here stands for heading 48 00:03:28,640 --> 00:03:34,290 number one the biggest boldest and most important heading on the Web site. 49 00:03:34,340 --> 00:03:40,560 So while that's very well and good let's try to understand the syntax a little better the way that each 50 00:03:40,550 --> 00:03:47,550 team l works and is structured is by paying attention very closely to three components. 51 00:03:47,600 --> 00:03:53,870 So if we got our H all that looks like this then the first thing that we have to be aware of is the 52 00:03:53,900 --> 00:03:58,850 opening tag and this is the name of the H Temple element. 53 00:03:58,850 --> 00:04:01,520 In this case it's our H1 tag. 54 00:04:01,520 --> 00:04:08,450 The second thing we have to be aware of with the syntax is the closing tag which is at the end and it's 55 00:04:08,450 --> 00:04:15,530 marked with the name of the element but preceding the name you have that forward slash the final component 56 00:04:15,680 --> 00:04:18,110 in H2 email is of course the contents. 57 00:04:18,110 --> 00:04:21,140 So these are the words I've got here in the middle. 58 00:04:21,140 --> 00:04:24,440 Now this structure should actually look a little bit familiar. 59 00:04:24,500 --> 00:04:29,420 We've actually seen something that's very very similar to this before. 60 00:04:29,630 --> 00:04:36,710 Remember our module on gradient descent in this module we were inserting markdown cells into Jupiter 61 00:04:36,710 --> 00:04:41,290 notebook and formatting them with something called late type notation. 62 00:04:41,330 --> 00:04:46,910 So if I double click on the cell I can see that this nice equation that we've got here is actually formatted 63 00:04:47,120 --> 00:04:54,920 using these opening and closing tags just like our HDMI l our late tech notation has beginning and ending 64 00:04:54,920 --> 00:04:58,040 tags that surround the content. 65 00:04:58,040 --> 00:05:04,400 So if we go into our Jupiter notebook and say we go down to the very very end and we add some markdown 66 00:05:04,400 --> 00:05:10,670 cells here and you want to add some of your own equations then the way to do it is simply by adding 67 00:05:10,730 --> 00:05:13,170 some opening tags in the case of latex. 68 00:05:13,250 --> 00:05:22,370 It's the two dollar signs and then writing your equation saying F of X is equal to for X to the power 69 00:05:22,370 --> 00:05:30,380 of two plus five and then closing this off with two dollar signs again and shift into we'll show an 70 00:05:30,380 --> 00:05:31,940 equation like so. 71 00:05:31,940 --> 00:05:33,270 But here's the kicker. 72 00:05:33,680 --> 00:05:41,780 Jupiter doesn't actually just support latex markdown it also supports H2 AML and that means we can add 73 00:05:41,780 --> 00:05:46,610 headings and other H2 metal elements not just toward the website that we're creating but we can also 74 00:05:46,610 --> 00:05:50,380 add them straight to Jupiter so check this out. 75 00:05:50,380 --> 00:05:56,050 I'm going to add a couple of cells here and I want to change this one to mark down and I'm gonna type 76 00:05:56,050 --> 00:06:05,710 the very same thing that I had in the HMO file in V.S. code so open angled brackets each one closing 77 00:06:05,710 --> 00:06:13,300 angle brackets and you can even see the syntax highlighting change here and I'll write this is an H1 78 00:06:13,750 --> 00:06:19,690 heading and then I've got the angle brackets and I have to insert my closing tag with the forward slash 79 00:06:20,020 --> 00:06:25,540 and then the name of the element which in this case was H. 80 00:06:25,540 --> 00:06:31,930 Now if I hit shift enter on here then you should see that we've got this H email code running in our 81 00:06:31,930 --> 00:06:34,210 Jupiter notebook as well. 82 00:06:34,210 --> 00:06:39,160 So this means that whatever you're learning in this lesson about each HDL L and CSF styling can just 83 00:06:39,160 --> 00:06:40,710 be used for creating a Web site. 84 00:06:40,750 --> 00:06:44,340 You can also use it to style your notebooks. 85 00:06:44,380 --> 00:06:49,690 So at this point you might ask well OK that's very nice but how do I actually know which each chair 86 00:06:49,690 --> 00:06:54,010 Mel tags are out there and which ones I can actually use in my notebook. 87 00:06:54,010 --> 00:07:00,790 And the answer is is that you can find out all about h to melt on my two favorite Web sites for documentation 88 00:07:01,030 --> 00:07:04,570 which are MDA N and W three schools. 89 00:07:04,570 --> 00:07:08,570 I want to put the links to both of these Web sites in the lesson resources. 90 00:07:08,650 --> 00:07:14,730 So either google the name MDA n or go straight to the lesson resources and find the links there. 91 00:07:16,290 --> 00:07:19,830 Now the H1 heading of course isn't the only heading out there. 92 00:07:20,340 --> 00:07:27,620 So as a challenge can you add the second and the third largest headings to this Jupiter notebook. 93 00:07:27,750 --> 00:07:35,280 Head on over to the NBN web docs or w three schools to find out what the h Tim l tags are called and 94 00:07:35,280 --> 00:07:41,090 then try your hand at adding a markdown cell to Jupiter and adding them there. 95 00:07:41,130 --> 00:07:49,870 I'll give you a few seconds to pause the video before I show you the solution. 96 00:07:49,890 --> 00:07:51,750 All right so here's the solution. 97 00:07:51,750 --> 00:07:57,800 What I would do is straight up Google for each Tim headings Emdin and get taken to this site right here 98 00:07:58,650 --> 00:08:03,210 and here I've got a list and I've even got a little example here on the right. 99 00:08:03,660 --> 00:08:08,470 So there's the H1 H2 all the way through to H six. 100 00:08:08,610 --> 00:08:12,720 And to add them to Jupiter all we need to do is changes to a markdown. 101 00:08:12,900 --> 00:08:24,270 And again at H2 and see this is an H2 heading and then close the tag at the end and we can even take 102 00:08:24,270 --> 00:08:32,510 this copy out and add the h three at the end and change all the H 2s to h three. 103 00:08:32,730 --> 00:08:36,080 And now we've got a nice sized comparison inside Jupiter. 104 00:08:36,570 --> 00:08:37,420 Excellent. 105 00:08:37,440 --> 00:08:44,670 So now we know how each terminal tax work and where to find them but it still leaves one question open. 106 00:08:44,670 --> 00:08:49,600 How do we actually change the styling of these headings to change the styling. 107 00:08:49,610 --> 00:08:53,530 We need to learn about something called H Tamal attributes. 108 00:08:53,640 --> 00:08:57,070 So what is the syntax look like for each terminal attributes. 109 00:08:57,090 --> 00:08:58,660 Let me show you an example. 110 00:08:58,680 --> 00:09:05,400 So say I've got my heading here and I want to give this an attribute that gives this heading a unique 111 00:09:05,490 --> 00:09:07,320 identifier. 112 00:09:07,320 --> 00:09:14,550 To do that I want to use this attribute called I.D. and the syntax 4D H.M. attributes just consists 113 00:09:14,610 --> 00:09:22,020 of an attribute name which I've highlighted here in blue and an attribute value which follows the equals 114 00:09:22,020 --> 00:09:29,310 sign of the attribute and is just inside the opening tag of the HMO element. 115 00:09:29,310 --> 00:09:34,600 So crucially these attributes are before the second angle bracket for the H terminal tag. 116 00:09:34,680 --> 00:09:37,090 And that brings me to changing the style. 117 00:09:37,110 --> 00:09:41,840 We can change the style of an HMO element using these style attributes. 118 00:09:41,850 --> 00:09:46,530 This is one way of changing the look and feel of an HMO element. 119 00:09:46,650 --> 00:09:48,300 So say we've got this heading right here. 120 00:09:48,810 --> 00:09:54,120 If we wanted to change the colour of this heading we would add these style attribute like so. 121 00:09:54,120 --> 00:09:59,340 And then for the value of this attribute we would write color code on blue. 122 00:09:59,340 --> 00:10:03,420 And what we're doing here is changing the colour of this heading to blue. 123 00:10:03,420 --> 00:10:08,190 But the interesting bit here is that the attribute value is actually CSL coat. 124 00:10:08,220 --> 00:10:12,690 So what we've got is CSI as code inside the temple tag. 125 00:10:12,810 --> 00:10:19,080 Now as a challenge I'd like you to pause the video and change the second heading in the Jupiter notebook 126 00:10:19,230 --> 00:10:24,690 to blue and change the third heading to this shade of wisteria. 127 00:10:24,690 --> 00:10:31,260 This shade of purple and you can get this particular shade off this website called Flat UI eye colors 128 00:10:31,260 --> 00:10:39,560 that come and go to their default color palette and copy this shade right here you'll find a link to 129 00:10:39,560 --> 00:10:46,240 this website in the lesson resources of course once again I'll give you a few seconds to pause the video 130 00:10:46,300 --> 00:10:54,430 so you can modify the style attribute of this HDMI tag and add your CSX code. 131 00:10:54,580 --> 00:10:54,980 Ready. 132 00:10:55,630 --> 00:10:57,000 Here's the solution. 133 00:10:57,130 --> 00:11:05,440 So if I reveal the HMO code inside the cell then you've got here in the mark down you've got this attribute 134 00:11:05,470 --> 00:11:12,850 cult style and the attribute value for the each to heading is this bit of CSX code right here and here 135 00:11:12,850 --> 00:11:18,850 we're setting the color equal to blue for the third heading what I've done is I've gone over here to 136 00:11:18,850 --> 00:11:25,120 this website and I've copied the actual hex code and then instead of providing a color name I've provided 137 00:11:25,360 --> 00:11:27,360 a hex code for the color. 138 00:11:27,370 --> 00:11:32,680 Now you can actually tag on more and more styling properties one after the other. 139 00:11:32,740 --> 00:11:42,670 So if I put a semicolon here and add another C Ss property see one called font size separated by a hyphen 140 00:11:43,330 --> 00:11:48,540 and set this particular property to two hundred p x two hundred pixels. 141 00:11:48,640 --> 00:11:54,900 Then I'm going to get an enormous H 3 heading so the sky's really the limit. 142 00:11:54,950 --> 00:12:03,080 You can add as many CFS properties as you like in this each time l styles attribute but if I go back 143 00:12:03,080 --> 00:12:09,680 to the stop project you might be wondering looking at this h t email file where all the style attributes 144 00:12:09,680 --> 00:12:17,510 all is that we've got a different way of styling our HMO elements than putting this ISIS code directly 145 00:12:17,750 --> 00:12:25,190 inside the tag for the HMO attribute instead what we've done is we've separated it out. 146 00:12:25,190 --> 00:12:32,930 We've got a separate file that just does the styling so we've got one file for the structure and one 147 00:12:32,930 --> 00:12:36,030 file for the styling of our website. 148 00:12:36,050 --> 00:12:43,440 This way we're not actually mixing the HDMI L and the CSX the way we did here in the Jupiter notebook. 149 00:12:43,670 --> 00:12:46,510 So how are these two files actually linked. 150 00:12:46,550 --> 00:12:52,500 How does the CSF file know how to style the elements in the HDMI file. 151 00:12:52,670 --> 00:12:59,870 And the answer is is that there really are three ways to keep these styling external to the HMO file. 152 00:13:00,080 --> 00:13:08,870 The first way is linking the styling in the C Ss file to an H Jamil element by that elements I D. 153 00:13:08,970 --> 00:13:17,780 So in this case if our heading here has an I.D. called title then we can style that heading by using 154 00:13:17,990 --> 00:13:19,220 its identifier. 155 00:13:19,610 --> 00:13:24,280 So in the CFS file we would have code that looks something like this. 156 00:13:24,320 --> 00:13:32,390 We would have that hashtag or pound symbol followed by the I.D. and then between the curly braces we 157 00:13:32,390 --> 00:13:40,590 would have all the styling attributes that we want to apply to that heading so let's head back to V.S. 158 00:13:40,590 --> 00:13:43,410 code and put this into practice. 159 00:13:43,530 --> 00:13:52,530 Let's style our H one element using a unique I.D. so we can come in him inside the opening tag for our 160 00:13:52,530 --> 00:13:58,620 H one and we can see I.D. is equal to and then single quotes title. 161 00:13:58,650 --> 00:14:05,190 Now what we can do is we can head over to our styles Nazi SS file and at the top where I've got my comment 162 00:14:05,430 --> 00:14:13,890 just below the to do we can add a pound symbol and then the name of our I.D. title and then some curly 163 00:14:13,890 --> 00:14:18,940 braces and you can see that V code is kind enough to have the closing curly brace. 164 00:14:18,960 --> 00:14:25,710 As soon as I type the opening curly brace and here going to add two properties the first one is a color 165 00:14:25,950 --> 00:14:29,600 and for the color I'm going to go for a particular shade of red. 166 00:14:29,640 --> 00:14:36,830 It's kind of between a pink and a red and this is gonna be the red with a hex code that goes FC eight 167 00:14:36,840 --> 00:14:46,920 C 9 3 1 really nice feature of v s code is that it actually recognizes color hex codes and it actually 168 00:14:46,920 --> 00:14:52,250 brings up a little window here telling me exactly what shade I've got in this preview here. 169 00:14:52,290 --> 00:14:59,610 And when I hover over my hex code so I don't even have to search what this hex code is in Google. 170 00:14:59,610 --> 00:15:04,440 At the end of this year says proper team I want to put a semicolon and I'm going to go down to the next 171 00:15:04,440 --> 00:15:09,330 line and just specify what the line height should be for my title. 172 00:15:09,330 --> 00:15:18,510 So this is the line height property colon and I want to go 50 pixels so fifty P x close itself again 173 00:15:18,510 --> 00:15:25,260 with a semicolon and I'm going to hit save on my keyboard and you should see this little dot go away 174 00:15:25,260 --> 00:15:30,120 at the very top means we've got unsafe changes and then I'm going to go to my index that each time l 175 00:15:30,120 --> 00:15:35,370 file and then I'm also going to save and I should see that dot disappear. 176 00:15:35,370 --> 00:15:43,380 And now when I head back into my stop project and refresh in Google Chrome then I should see the styling 177 00:15:43,740 --> 00:15:46,710 applied to my Web site. 178 00:15:46,830 --> 00:15:55,020 So I've got mascara now and this shade of red and I've got the line height specified to 50 pixels. 179 00:15:55,140 --> 00:16:03,810 So what we've done is we've got this hashtag right here in front of the word title title being the idea 180 00:16:03,990 --> 00:16:06,720 of my age one element. 181 00:16:06,720 --> 00:16:11,930 And what this thing is actually called is a CSX selector. 182 00:16:12,030 --> 00:16:19,770 We are selecting an element by the I.D. in this case but this CSX selector is not the only selector 183 00:16:19,770 --> 00:16:23,940 out there because we don't actually have to go by element I.D.. 184 00:16:24,450 --> 00:16:26,670 We could also select by element. 185 00:16:26,670 --> 00:16:29,060 So how would the CSX code look in this case. 186 00:16:29,220 --> 00:16:33,170 What would it look like if we're selecting by element. 187 00:16:33,180 --> 00:16:37,640 Well in this case our H2 mill might have no attributes at all. 188 00:16:37,650 --> 00:16:40,610 So here I've just got an H1 reading my heading. 189 00:16:41,280 --> 00:16:48,750 And in order to style this particular H1 I would just have CSX code that has the name of the element. 190 00:16:49,110 --> 00:16:53,240 And then in the curly braces I have how I'm going to style it. 191 00:16:53,370 --> 00:16:56,310 Pretty easy pretty straightforward right. 192 00:16:56,370 --> 00:16:58,800 Just the name of the element no hashtag. 193 00:16:59,850 --> 00:17:03,850 Let's put this selector into practice and V.S. code. 194 00:17:03,880 --> 00:17:04,950 Let's style. 195 00:17:04,950 --> 00:17:13,170 Both the H1 element and the H2 element using the elements selector in CSX. 196 00:17:13,170 --> 00:17:20,160 In this case just below this to do right here and then add each one and then because I'm styling more 197 00:17:20,160 --> 00:17:24,040 than one element I won't have the H right here. 198 00:17:24,090 --> 00:17:28,140 And then between the two curly braces I'm going to add a font weight. 199 00:17:28,200 --> 00:17:33,830 So how thick the font is and a font size how large I want the font to be. 200 00:17:33,900 --> 00:17:41,790 So the font weight and you can see here I'm just typing a W and V.S. code is actually going to help 201 00:17:41,790 --> 00:17:44,220 me with autocomplete for the rest. 202 00:17:44,270 --> 00:17:51,260 I'm going to add 400 cordon at the end and I can move on to the font size. 203 00:17:51,570 --> 00:17:56,800 And this I want to be equal to 200 p x 200 pixels. 204 00:17:56,970 --> 00:18:06,030 And if I save my CFS file head back into chrome and refresh then I can see my title and my equation 205 00:18:06,240 --> 00:18:12,940 has become very large indeed because this is my H2 and this is my H 1. 206 00:18:13,080 --> 00:18:17,520 So now we've seen two ways of selecting elements in the CSX code. 207 00:18:17,520 --> 00:18:20,330 The first way was by the elements I.D.. 208 00:18:20,640 --> 00:18:26,650 So that's using this pound symbol here and then the name of the I.D. and the second way was by element. 209 00:18:26,670 --> 00:18:28,740 So H1 and H2. 210 00:18:28,830 --> 00:18:35,010 Now you can look at the CSX code here and probably spot which other element we're styling by element 211 00:18:35,640 --> 00:18:37,600 and that's the very first one at the top. 212 00:18:38,010 --> 00:18:42,790 We're selecting the entire body of the website and styling it like so. 213 00:18:43,160 --> 00:18:44,760 Whereas the body. 214 00:18:44,760 --> 00:18:46,140 Well it's right here. 215 00:18:46,530 --> 00:18:53,560 It's the body of the entire document you can get a good visual on this by going to the Chrome developer 216 00:18:53,560 --> 00:18:54,160 tools. 217 00:18:54,220 --> 00:18:58,560 Just go to more tools and then developer tools. 218 00:18:58,900 --> 00:19:04,660 And then if you hover over a particular part of the NHT Mal code you'll see it highlighted on the left 219 00:19:04,660 --> 00:19:05,720 hand side. 220 00:19:05,740 --> 00:19:07,410 So this is our H1. 221 00:19:07,540 --> 00:19:13,120 This is our H2 and this is the body of the page now. 222 00:19:13,200 --> 00:19:19,430 There's a third yes selector that's really important and that we have to learn about and this is the 223 00:19:19,490 --> 00:19:26,960 selector where we're selecting by class the H2 AML code looks really really similar to the first case 224 00:19:26,990 --> 00:19:33,080 where we've got the I.D. but in this case the attribute is different here instead of the I.D. We're 225 00:19:33,200 --> 00:19:37,630 using the word class and we're giving it a value. 226 00:19:37,670 --> 00:19:44,640 And in this case I'm calling it core classes equal to core but what does this mean. 227 00:19:44,870 --> 00:19:49,340 Well class is just a category that you've made up. 228 00:19:49,340 --> 00:19:52,610 So in this case I've got a category called core. 229 00:19:52,610 --> 00:19:53,480 Why is this useful. 230 00:19:54,320 --> 00:19:57,050 Well say you've got multiple elements right. 231 00:19:57,050 --> 00:20:00,030 Say for example you've got five H2 elements. 232 00:20:00,170 --> 00:20:05,060 And what you really want to do is you want to style three of them one way and you want to stall the 233 00:20:05,120 --> 00:20:07,250 other three in a different way. 234 00:20:07,250 --> 00:20:14,770 So how can you do this well you could create two groups you could divide the headings into two different 235 00:20:14,770 --> 00:20:22,720 categories and if you give the first group a name called core and the second group a name called Extra 236 00:20:23,080 --> 00:20:31,540 then you could refer to all the members of this first group by selecting by class and the CSX code would 237 00:20:31,540 --> 00:20:33,090 look like this. 238 00:20:33,190 --> 00:20:41,680 So we'd have dot core core being the name of the class and then open curly braces all the properties 239 00:20:41,710 --> 00:20:47,500 that you want to use for styling them and then the closing curly brace pretty simple right. 240 00:20:48,790 --> 00:20:55,540 Let's head back into our star project and see if we can spot where we've used the class selector so 241 00:20:55,540 --> 00:20:55,960 far. 242 00:20:56,230 --> 00:21:02,380 If we take a look at our index that each time l file and scroll down a bit then we can see this button 243 00:21:02,380 --> 00:21:09,420 right here and this button has a class that's equal to Beatty in short for button. 244 00:21:09,520 --> 00:21:15,880 And if we take a look at our styles that CFS file and we scroll down then we see that we're selecting 245 00:21:15,880 --> 00:21:23,740 this button using the class selector so don't B10 and then we're styling it with all of these properties. 246 00:21:25,120 --> 00:21:26,860 Now how do we go about styling this button. 247 00:21:27,610 --> 00:21:31,240 Well first let's change the button text instead of button text here. 248 00:21:31,270 --> 00:21:32,170 Let's have it read. 249 00:21:32,260 --> 00:21:32,660 Check. 250 00:21:32,670 --> 00:21:40,990 Answer So going into our index that each time l I can change this value right here the contents of the 251 00:21:40,990 --> 00:21:44,030 button text and change it to check. 252 00:21:44,270 --> 00:21:47,200 Answer I can save my work. 253 00:21:47,320 --> 00:21:51,860 Go back here refresh and then we have it. 254 00:21:51,940 --> 00:21:53,140 Now I've got a challenge for you. 255 00:21:53,710 --> 00:21:55,780 We can actually stall this button differently. 256 00:21:55,780 --> 00:22:01,570 Whether or not our mouse is hovering over the button in the final project we wanted to look something 257 00:22:01,570 --> 00:22:02,490 like this. 258 00:22:02,560 --> 00:22:08,440 So when we hover over it we want the color of the button to change to be equal to the background color 259 00:22:09,130 --> 00:22:13,750 and we want the text of the button to change into white. 260 00:22:13,750 --> 00:22:21,140 So this is the behavior that we want on our Web site and the way we can achieve this is using the CSA 261 00:22:21,140 --> 00:22:22,890 as class selector. 262 00:22:22,960 --> 00:22:26,010 Now to solve this challenge you'll need to do a couple of things. 263 00:22:26,110 --> 00:22:33,100 First you can have to figure out what the syntax is for changing a buttons styling depending on whether 264 00:22:33,100 --> 00:22:34,750 or not it's being hovered over. 265 00:22:36,100 --> 00:22:43,420 And I recommend checking the documentation on Emdin or W three schools for the solution. 266 00:22:43,420 --> 00:22:47,890 The next thing you're gonna have to do to solve this challenge is you're going to have to change to 267 00:22:47,890 --> 00:22:49,450 styling properties. 268 00:22:49,570 --> 00:22:53,060 You can have the change the background color and the color. 269 00:22:53,190 --> 00:22:57,170 So for the background color you can have to make it equal to this blue right here. 270 00:22:57,220 --> 00:23:00,850 And for the text color you're going to have to make it equal to white. 271 00:23:00,880 --> 00:23:03,550 I'll give you a few seconds to pause the video. 272 00:23:03,550 --> 00:23:09,280 Have a Google and try to figure out what the code is gonna have to be in order to get this effect 273 00:23:12,440 --> 00:23:13,270 ready. 274 00:23:13,280 --> 00:23:14,960 Here's the solution. 275 00:23:14,960 --> 00:23:22,810 So I'm going to write CSX change button on hover and I just type that into google and then I'm going 276 00:23:22,810 --> 00:23:32,040 to head over to W3 schools and there when I scroll down I can find a little bit of code here. 277 00:23:32,280 --> 00:23:37,430 But this is just about basic buttons styling scrolling further down. 278 00:23:37,560 --> 00:23:43,480 I can see how to create a rounded button colored button and also a hoverboard button. 279 00:23:43,500 --> 00:23:45,270 Now this looks promising right. 280 00:23:45,330 --> 00:23:50,550 If I take a look at their code snippet here then I can see that they're selecting the button using the 281 00:23:50,550 --> 00:23:59,800 class selector so don't button that dot is the give away here and then they've got this colon and hover. 282 00:24:00,060 --> 00:24:05,290 So they're styling the button differently depending whether or not it's being hovered over. 283 00:24:05,310 --> 00:24:07,330 So this looks very very promising right. 284 00:24:07,350 --> 00:24:14,720 I'm going to select this code and I'm going to copy it and I'm going to go back into this code. 285 00:24:14,790 --> 00:24:18,190 So here we're going to go to our styles that CSX. 286 00:24:18,330 --> 00:24:24,750 And for that to do at the bottom I'm going to paste in the code from W3 schools. 287 00:24:24,750 --> 00:24:30,210 Now there's a couple of modifications I'm going to have to make to this code to get it to work. 288 00:24:30,300 --> 00:24:33,040 First off what's our class called. 289 00:24:33,050 --> 00:24:35,030 Well it's not called button right. 290 00:24:35,030 --> 00:24:37,310 It's actually called B10. 291 00:24:37,430 --> 00:24:43,310 I want to have to change this selector here to B10 colon hover and then I wouldn't have to change these 292 00:24:43,310 --> 00:24:51,530 colors so if I save my changes right now and I go back into chrome and I refresh then it's going to 293 00:24:51,530 --> 00:24:53,150 turn green when I hover over it. 294 00:24:53,540 --> 00:24:55,310 But this isn't really the effect we want. 295 00:24:55,580 --> 00:24:57,950 We want this color right here. 296 00:24:58,010 --> 00:24:59,300 So where do we get this color. 297 00:24:59,300 --> 00:25:05,450 Well we can look at how we're selling our body and we can copy this hex code that we've got here as 298 00:25:05,450 --> 00:25:12,500 a background color and instead of the green we're going to paste in the hex code for the blue and that's 299 00:25:12,500 --> 00:25:13,280 it. 300 00:25:13,520 --> 00:25:22,290 If I save the changes head back into chrome refresh then I've got the behavior that we want brilliant 301 00:25:24,020 --> 00:25:26,510 now there's just one piece missing right. 302 00:25:26,690 --> 00:25:28,260 And that's the canvas. 303 00:25:28,280 --> 00:25:33,620 So I've got the final project appear pier and you can see that I've got this canvas here that I can 304 00:25:33,620 --> 00:25:38,900 draw on but we still haven't added this yet to our stop project. 305 00:25:39,230 --> 00:25:46,390 So as a final challenge what I'd like you to do is add an HMO canvas to the index that each team will 306 00:25:46,400 --> 00:25:48,680 file right below this to do 307 00:25:54,140 --> 00:25:54,940 ready. 308 00:25:54,950 --> 00:25:56,340 Here's the solution. 309 00:25:56,420 --> 00:26:03,410 So if you searched the documentation on Emdin for how to add an HMO canvas then you'll get taken to 310 00:26:03,410 --> 00:26:04,610 a page like this. 311 00:26:04,970 --> 00:26:12,260 And here what we've got is a basic example where we can see that the name of the element is just canvas. 312 00:26:12,260 --> 00:26:15,200 So that should be pretty straightforward to add to our file. 313 00:26:15,800 --> 00:26:20,770 If I scroll down a little bit more I can even find a canvas tutorial. 314 00:26:21,110 --> 00:26:27,740 And if I click on this and scroll down a little bit then I can see that there is a fairly comprehensive 315 00:26:27,740 --> 00:26:30,700 tutorial on how to work with an H2 male canvas. 316 00:26:31,160 --> 00:26:32,210 But let's go to the beginning. 317 00:26:32,240 --> 00:26:39,050 Let's check out basic usage in here what we've got is a video like a code snippet where I can see that 318 00:26:39,050 --> 00:26:45,190 there actually exists a height and a width attribute even set to 150. 319 00:26:45,530 --> 00:26:48,020 So I'm going to take this bit of code here. 320 00:26:48,200 --> 00:26:52,210 I'm going to copy it and I went head over to my HD him Al file. 321 00:26:52,210 --> 00:26:53,900 I'm going to paste it in. 322 00:26:53,930 --> 00:26:57,060 And I'm going to delete this I.D. attribute. 323 00:26:57,120 --> 00:27:03,290 Now I'm going to save my work and then I'm going to go over to Chrome and refresh my site to see what 324 00:27:03,290 --> 00:27:07,960 this looks like and I can't actually see anything here. 325 00:27:07,970 --> 00:27:08,990 Why is that. 326 00:27:08,990 --> 00:27:16,580 Let's bring up the Chrome developer tools and we're going to expand and see where our canvases. 327 00:27:16,580 --> 00:27:24,830 So if I hover over the actual code I can actually see my canvas but it looks like it's invisible on 328 00:27:24,830 --> 00:27:26,150 my actual Web site. 329 00:27:26,180 --> 00:27:27,110 So what's going on. 330 00:27:28,070 --> 00:27:34,040 Well I've actually missing the styling so I'm going to have to add my styling to this canvas in order 331 00:27:34,040 --> 00:27:37,640 to get the look that I want and here's how we're going to do it. 332 00:27:38,120 --> 00:27:40,940 Let's select this canvas by its I.D.. 333 00:27:40,940 --> 00:27:49,400 So when I give it an I.D. with the I.D. attribute and I'm going to call it my hyphen canvas in single 334 00:27:49,400 --> 00:27:55,820 quotes then and when I save my changes in the H to Mal file and head over to the CSX file and below 335 00:27:55,820 --> 00:28:04,010 this to do I'm going to select this canvas by its I.D. to use the I.D. selector in CSX we use the hashtag 336 00:28:04,490 --> 00:28:11,900 and then we can write my hyphen canvas and then between the curly braces we can specify some of its 337 00:28:11,900 --> 00:28:13,010 properties. 338 00:28:13,010 --> 00:28:21,110 Now to style this canvas I want to specify five things I'm going to vertically align it to the top. 339 00:28:21,110 --> 00:28:24,440 I'm going to display it in line. 340 00:28:24,500 --> 00:28:36,400 I'm going to add a border of five pixels that's solid and white and then I'm gonna save my changes and 341 00:28:36,400 --> 00:28:41,560 take a look at what these three properties actually translate into on my Web site. 342 00:28:42,580 --> 00:28:49,540 So if I come back here and I refresh that I can see this border and I can see how it's aligned with 343 00:28:49,570 --> 00:28:50,650 my H2. 344 00:28:50,650 --> 00:28:55,330 So now my canvas is in line with my equation. 345 00:28:55,370 --> 00:28:55,850 All right. 346 00:28:55,850 --> 00:29:02,690 So congratulations of making it all the way through this very information dance lesson we've learned 347 00:29:02,900 --> 00:29:08,330 quite a lot of things we've learned everything from how to add each two male elements to our Web site 348 00:29:08,630 --> 00:29:10,610 and to our Jupiter notebook. 349 00:29:10,760 --> 00:29:17,240 And we've also learned a lot of different ways of styling our HMO elements using CSX. 350 00:29:17,240 --> 00:29:18,830 So where are we going from here. 351 00:29:19,610 --> 00:29:25,970 Well first off what we're gonna do is we're going to test our tensor flow model that we've painstakingly 352 00:29:25,970 --> 00:29:27,110 exported. 353 00:29:27,110 --> 00:29:32,000 We're going to check if it actually works on our Web site and then we're gonna have to write the logic 354 00:29:32,120 --> 00:29:40,010 for being able to draw on our canvas because at the moment we can't draw on our canvas and our canvas 355 00:29:40,010 --> 00:29:44,210 doesn't have this black background that the final project will have. 356 00:29:44,210 --> 00:29:48,110 So these are all things that are still on our to do list. 357 00:29:48,110 --> 00:29:53,480 The best part about all those is that now that we've wrapped up our design of our website we can focus 358 00:29:53,750 --> 00:29:54,740 on the logic. 359 00:29:54,890 --> 00:30:01,250 We can start writing some javascript code for all of that and more I'll see you in the next lessons. 360 00:30:01,250 --> 00:30:01,790 Take care.